<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" [lvLabelColon]="false" class="formGroup" lvKeepRequiredWidth>
    <lv-form-item>
        <lv-form-label>
            {{'protection_restore_to_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
            <lv-radio-group formControlName="restoreTo">
                <lv-group [lvGutter]="'30px'">
                    <lv-group>
                        <lv-radio [lvDisabled]="restoreToNewLocationOnly" [lvValue]=restoreLocationType.ORIGIN>
                            {{'common_restore_to_origin_location_label' | i18n}}
                        </lv-radio>
                    </lv-group>
                    <lv-group>
                        <lv-radio [lvValue]=restoreLocationType.NEW>
                            {{'common_restore_to_new_location_label' | i18n}}
                        </lv-radio>
                    </lv-group>
                </lv-group>
            </lv-radio-group>
        </lv-form-control>
    </lv-form-item>
    <ng-container *ngIf="formGroup.value.restoreTo === restoreLocationType.ORIGIN">
        <lv-form-item>
            <lv-form-label>
                {{'protection_computer_location_label' | i18n}}
            </lv-form-label>
            <lv-form-control>
                <span lv-overflow>
                    {{originLocation | nil}}
                </span>
            </lv-form-control>
        </lv-form-item>
        <ng-container *ngIf="!rowCopy.diskRestore">
            <lv-form-item>
                <lv-form-label lvRequired>{{'protection_new_vm_name_label' | i18n}}</lv-form-label>
                <lv-form-control [lvErrorTip]="nameErrorTip">
                    <input lv-input type="text" formControlName="name" />
                </lv-form-control>
            </lv-form-item>
        </ng-container>
    </ng-container>
    <ng-container *ngIf="formGroup.value.restoreTo === restoreLocationType.NEW">
        <ng-container *ngIf="!rowCopy.diskRestore">
            <lv-form-item>
                <lv-form-label lvRequired>{{'protection_new_vm_name_label' | i18n}}</lv-form-label>
                <lv-form-control [lvErrorTip]="nameErrorTip">
                    <input lv-input type="text" formControlName="name" />
                </lv-form-control>
            </lv-form-item>
        </ng-container>
          <h2 class="aui-gutter-column-md">{{'common_location_label' | i18n}}</h2>
        <lv-alert lvType="info" lvClosable="false">
          {{'protection_restore_hyperv_vm_path_tips_label'|i18n}}
        </lv-alert>
        <lv-form-item>
            <lv-form-label lvRequired>
                {{'protection_computer_location_label' | i18n}}
            </lv-form-label>
            <lv-form-control>
                <lv-select formControlName="environment" [lvOptions]="environmentOptions" lvValueKey="uuid" lvShowFilter
                    lvFilterKey="label" lvFilterMode="contains" [lvContentTemplate]="contentTpl">
                </lv-select>
                <ng-template #contentTpl let-item>
                    <lv-group lvGutter="4px">
                        <i lv-icon="{{
                              [dataMap.Resource_Type.hyperVHost.value].includes(item.subType) ? 'aui-icon-host' : 'aui-icon-cluster'
                            }}"></i>
                        <span>{{ item.label }}</span>
                    </lv-group>
                </ng-template>
            </lv-form-control>
        </lv-form-item>
        <ng-container *ngIf="showHostSelect">
            <lv-form-item>
                <lv-form-label></lv-form-label>
                <lv-form-control>
                    <lv-select formControlName="host" [lvOptions]="hostOptions" lvValueKey="uuid" lvShowFilter
                        lvFilterKey="label" lvFilterMode="contains">
                    </lv-select>
                </lv-form-control>
            </lv-form-item>
        </ng-container>
        <ng-container *ngIf="rowCopy.diskRestore">
            <lv-form-item>
                <lv-form-label lvRequired>
                    {{'protection_target_vm_label' | i18n}}
                </lv-form-label>
                <lv-form-control>
                    <lv-select formControlName="targetVm" [lvOptions]="targetVmOptions" lvValueKey="uuid" lvShowFilter
                        lvFilterKey="label" lvFilterMode="contains">
                    </lv-select>
                </lv-form-control>
            </lv-form-item>
        </ng-container>
        <ng-container *ngIf="!rowCopy.diskRestore">
            <lv-form-item>
                <lv-form-label lvRequired>
                    {{'protection_storage_location_label' | i18n}}
                </lv-form-label>
                <lv-form-control>
                    <lv-radio-group formControlName="storage">
                        <lv-group [lvGutter]="'30px'">
                            <lv-radio [lvValue]="datastoreType.DIFFERENT">
                                {{'protection_diff_database_label' | i18n}}
                            </lv-radio>
                            <lv-radio [lvValue]="datastoreType.SAME">
                                {{'protection_same_database_label' | i18n}}
                            </lv-radio>
                        </lv-group>
                    </lv-radio-group>
                </lv-form-control>
            </lv-form-item>
            <ng-container *ngIf="formGroup.value.storage === datastoreType.DIFFERENT">
                <lv-form [formGroup]="newFormGroup" class="mgb-16">
                  <lv-form-item>
                    <lv-form-label lvRequired>
                      {{'protection_vm_storage_location_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control [lvErrorTip]="vmStorageErrorTip">
                      <input lv-input type="text" formControlName="vmStorage"/>
                    </lv-form-control>
                  </lv-form-item>
                </lv-form>
                <lv-form-item>
                    <lv-form-label lvRequired>
                        {{'protection_vm_disk_file_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control>
                        <lv-datatable lvSize="small" [lvPaginator]='page' [lvData]="storageDiskTableData" #diskTable>
                            <thead>
                                <tr>
                                    <th width="80px">{{'protection_fc_disk_name_label' | i18n}}</th>
                                    <th width="85px">{{'common_format_label' | i18n}}</th>
                                    <th width="65px">{{'protection_fc_disk_capacity_label' | i18n}}</th>
                                    <th width="160px">{{'protection_tagert_database_label' | i18n}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <ng-container *ngFor="let item of diskTable.renderData;">
                                    <tr>
                                        <td>
                                            <span lv-overflow>{{item.name | nil}}</span>
                                        </td>
                                        <td>
                                            <span lv-overflow>{{item.extendInfo?.Format | nil}}</span>
                                        </td>
                                        <td>
                                            {{item.extendInfo?.Capacity |
                                            capacityCalculateLabel:'1.0-0':unitconst.BYTE:false}}
                                        </td>
                                        <td>
                                          <lv-form-control [lvErrorTip]="vmStorageErrorTip">
                                            <input type="text" lv-input [formControl]="item.targetDatastore"/>
                                          </lv-form-control>
                                        </td>
                                    </tr>
                                </ng-container>
                            </tbody>
                        </lv-datatable>
                        <lv-paginator #page lvMode="simple" [lvPageSize]="pageSize" [lvShowPageSizeOptions]="false"
                            [hidden]="!storageDiskTableData?.length">
                        </lv-paginator>
                    </lv-form-control>
                </lv-form-item>
            </ng-container>
            <ng-container *ngIf="formGroup.value.storage === datastoreType.SAME">
                <lv-form [formGroup]="newFormGroup">
                  <lv-form-item class="mgb-16">
                    <lv-form-label lvRequired>
                      {{'protection_tagert_database_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control [lvErrorTip]="vmStorageErrorTip">
                      <input lv-input type="text" formControlName="targetDatastore" />
                    </lv-form-control>
                  </lv-form-item>
                </lv-form>
            </ng-container>
        </ng-container>
    </ng-container>
    <div class="advanced-container">
        <lv-collapse [lvType]="'simple'">
            <lv-collapse-panel lvTitle="{{'common_advanced_label' | i18n}}" [lvExpanded]="false">
                <ng-container *ngIf="!rowCopy.diskRestore">
                    <lv-form-item>
                        <lv-form-label>
                            <div [ngClass]="{'auto-power-switch-en-us': isEn, 'auto-power-switch-zh-cn': !isEn}"
                                lv-overflow>
                                {{'protection_startup_network_adaptor_label' | i18n}}
                            </div>
                        </lv-form-label>
                        <lv-form-control>
                            <lv-switch formControlName="startupNetworkAdaptor"></lv-switch>
                            <span class="configform-constraint" *ngIf="formGroup.value.startupNetworkAdaptor">
                                <div class="startup-network-adaptor-warn" lv-overflow>
                                    {{'protection_startup_network_adaptor_warn_label' | i18n}}
                                </div>
                            </span>
                        </lv-form-control>
                    </lv-form-item>
                </ng-container>
                <lv-form-item>
                    <lv-form-label>
                        <div [ngClass]="{'auto-power-switch-en-us': isEn, 'auto-power-switch-zh-cn': !isEn}"
                            lv-overflow>
                            {{'protection_auto_power_on_label' | i18n}}
                        </div>
                    </lv-form-label>
                    <lv-form-control>
                        <lv-switch formControlName="powerOn"></lv-switch>
                    </lv-form-control>
                </lv-form-item>
                <ng-container *ngIf="formGroup.value.restoreTo === restoreLocationType.ORIGIN">
                    <lv-form-item *ngIf="!rowCopy?.diskRestore">
                        <lv-form-label>{{'protection_delete_origin_vm_label' | i18n}}</lv-form-label>
                        <lv-form-control>
                            <lv-switch formControlName="deleteOriginalVM">
                            </lv-switch>
                            <span *ngIf="formGroup.value.deleteOriginalVM" class="delete-vm-mgl">
                                <i lv-icon="lv-icon-status-warning-info" lvColorState='true' class="type-icon"></i>
                                <span>
                                    {{'protection_delete_origin_vm_warn_label' | i18n}}
                                </span>
                            </span>
                        </lv-form-control>
                    </lv-form-item>
                </ng-container>
                <lv-form-item *ngIf="!rowCopy.diskRestore && isHyperVCluster">
                    <lv-form-label>
                        {{'protection_add_to_cluster_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control>
                        <lv-switch formControlName="addToCluster"></lv-switch>
                    </lv-form-control>
                </lv-form-item>
            </lv-collapse-panel>
        </lv-collapse>
    </div>
</lv-form>
